<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<link rel="stylesheet" href="../lib/layui-v2.1.6/layui/css/layui.css">
<link rel="stylesheet" href="../resources/css/report-form.css">
<body>
        <i class="layui-icon icon" id="topIcon">&#xe62c;</i>
        <div class="table">
            <table class="layui-table" lay-skin="line row" id="reportTable" lay-filter="tableListen">
            </table>
        </div>
        <div class="chart">
            <div id="chartFrame">
                <ul>
                    <li><div id="echart1"></div></li>
                    <li><div id="echart2"></div></li>
                    <li>
                        <i class="layui-icon icon2" id="lasticon" style="margin-right: 50px;">前5条数据&#xe65a;</i>
                        <i class="layui-icon icon2" id="nextIcon">&#xe65b;后5条数据</i>
                    </li>
                </ul>
            </div>
        </div>
</body>
<script type="text/javascript" src="../lib/jquery.min.js"></script>
<script type="text/javascript" src="../lib/layui-v2.1.6/layui/layui.js"></script>
<script src="../lib/echart/echarts.js"></script>
<script>
    //表格窗口设置
	var Height=window.innerHeight*0.9;
    var tableWidth=window.innerWidth*0.139;
    var iconSize=window.innerHeight*0.05;
    var iconSize2=window.innerHeight*0.02;
    $('.icon').css({'font-size':iconSize});
    $('.icon2').css({'font-size':iconSize2});

    //图表窗口设置
    var echartsWidth = window.innerWidth*0.5+'px';
    var echartHeight = window.innerHeight*0.6+'px';
    var echartHeight2 = window.innerHeight*0.6+'px';
    var chartWidth = window.innerWidth*0.9+'px';
    var chartHeight = window.innerHeight*0.9+'px';
    $('#chartFrame').css({'height':chartHeight});
    $('#chartFrame').css({'weight':chartWidth});
    $('#echart1').css({'width':echartsWidth,'height':echartHeight});
    $('#echart2').css({'width':echartsWidth,'height':echartHeight2});
    $(window).resize(function() {
        var echartsWidth = window.innerWidth*0.5+'px';
        var echartHeight1 = window.innerHeight*0.95+'px';
        var echartHeight2 = window.innerHeight+'px';
        var chartWidth = window.innerWidth+'px';
        var chartHeight = window.innerHeight+'px';
        $('#chartFrame').css({'height':chartHeight});
        $('#chartFrame').css({'weight':chartWidth});
        $('#echarts1').css({'width':echartsWidth,'height':echartHeight1});
        $('#echarts2').css({'width':echartsWidth,'height':echartHeight2});
    });

    //图表数据
    var testsize=5;
    var cureName=[]; //治疗项目名称
    var cureCost=[]; //治疗费用收入
    var centralCost=[]; //本院支出
    var branchCost=[];  //分院支出
    var centeralIncome=[];  //总利润
    var testData; //报表数据

    //图表对象
    var barChart=echarts.init(document.getElementById("echart1")); //左边柱状图
    var pieChart=echarts.init(document.getElementById("echart2")); //右边饼图
    
 	//查询报表所属门诊
    var clinicName = JSON.parse(localStorage.getItem("clinicReport")).clinicName;
    
    //获取后端数据
   	$(function(){
    	var param = JSON.parse(localStorage.getItem("clinicReport"));
        console.log("clinicReport.html/78");
        console.log(param);
        $.ajax({
            data : param,
            type : "POST",
            url : "../reportController/getClinicTreatmentReport",
            success : function(response) {
                //初始化报表数据
                console.log("reportController/getClinicTreatmentReport");
                console.log(response.result);
                testData = response.result;
            }
        });
    }); 

    //表格初始化
    layui.use(["table","layer"],function () {
       var $=layui.jquery;
       var table=layui.table;
       var layer=layui.layer;
       //表格监听事件
       table.on('tool(tableListen)',function(obj){
            var trdom = obj.tr;  //获取当前点击对象的容器DOM对象
            //alert(obj.data.id); //获取当前点击行的id值
            //console.log(obj.data);
            localStorage.setItem("rowInfo",JSON.stringify(obj.data));
            if(obj.event==='centralCost'){
                layer.open({
                    type: 2,
                    title: '本院支出',
                    scrollbar: false,
                    area: ['80%', '90%'],
                    content: '../views/clinicSelfCostReport.html' //iframe的url
                });
            }else if(obj.event==='branchCost'){
                layer.open({
                   type: 2,
                   title:'分院支出',
                   scrollbar:false,
                   area:['80%','90%'],
                   content: '../views/branchCostReport.html'
                });
            }else if(obj.event==='cureCost'){
                layer.open({
                   type:2,
                   title:'治疗费用',
                   scrollbar:true,
                   area:['80%','90%'],
                   content:'../views/clinicCureCostReport.html'
                });
            }
        });
        //表格数据录入
       var param = JSON.parse(localStorage.getItem("clinicReport"));
       table.render({
            id:'idText'
            ,elem: '#reportTable' //指定原始表格元素选择器（推荐id选择器)
            ,page:true
            ,limit:10
            ,center:true
            ,height:Height
            ,cols: [[
                {field:'hospitalName',width:tableWidth,title:'门诊',align:'center'},
                {field:'cureName',width:tableWidth,title:'治疗项目',align:'center'},
                {field:'cureCost',width:tableWidth,title:'治疗收入',sort:true,align:'center',event:'cureCost',style:'cursor:pointer;color:#01AAED'},
                {field:'branchIncome',width:tableWidth,title:'抽成收入',sort:true,align:'center'},
                {field:'centralCost',width:tableWidth,title:'本院支出',sort:true,align:'center',event:'centralCost',style:'cursor:pointer;color:#01AAED'},
                {field:'branchCost',width:tableWidth,title:'分院支出',sort:true,align:'center',event:'branchCost',style:'cursor:pointer;color:#01AAED'},
                {field:'centeralIncome',width:tableWidth,title:'门诊总利润',sort:true,align:'center'}
           ]],
           url : "../reportController/getClinicTreatmentReport",
           method : "post",
           where : param,
           response : {
               statusName : "code", //数据状态的字段名称
               statusCode : 200, //成功的状态码
               countName: 'total', //数据总数的字段名称
               msgName  : "msg", //状态信息的字段名称
               dataName : "result" //数据列表的字段名称 
           }
        });

        //前五条数据点击事件
        $('#lasticon').click(function(){
            if(testData[testsize-6]!=null){
                cureName=[];
                cureCost=[];
                centralCost=[];
                branchCost=[];
                centeralIncome=[];
                testsize-=5;
                for(var i=testsize-5;i<testsize;i++){
                    if(testData[i]!=null) {
                        cureName.push(testData[i].cureName);
                        cureCost.push(testData[i].cureCost);
                        centralCost.push(testData[i].centralCost);
                        branchCost.push(testData[i].branchCost);
                        centeralIncome.push(testData[i].centeralIncome);
                    }else{
                        break;
                    }
                }
                barChart.setOption({
                    yAxis:{
                        data:cureName
                    },
                    series:[
                        {name:'本院支出',data:centralCost},
                        {name:'治疗费用',data:cureCost},
                        {name:'分院支出',data:branchCost},
                        {name:'门诊总利润',data:centeralIncome}
                    ]
                });
                pieChart.setOption({
                    title:{
                        text:cureName[0],
                        subtext:'费用比例图'
                    },
                    series: {
                        data: [
                            {value:centralCost[0],name:'本院支出'},
                            {value:branchCost[0],name:'分院支出'},
                            {value:centeralIncome[0],name:'门诊总利润'}
                        ]
                    }
                });
            }else{
                layer.msg("已经没有数据了");
            }
        });

        //后五条数据点击事件
        $('#nextIcon').click(function(){
            if(testData[testsize]!=null){
                cureName=[];
                cureCost=[];
                centralCost=[];
                branchCost=[];
                centeralIncome=[];
                testsize+=5;
                for(var i=testsize-5;i<testsize;i++){
                    if(testData[i]!=null) {
                        cureName.push(testData[i].cureName);
                        cureCost.push(testData[i].cureCost);
                        centralCost.push(testData[i].centralCost);
                        branchCost.push(testData[i].branchCost);
                        centeralIncome.push(testData[i].centeralIncome);
                    }else{
                        break;
                    }
                }
                barChart.setOption({
                    yAxis:{
                        data:cureName
                    },
                    series:[
                        {name:'本院支出', data:centralCost},
                        {name:'治疗费用', data:cureCost},
                        {name:'分院支出', data:branchCost},
                        {name:'门诊总利润', data:centeralIncome}
                    ]
                });
                pieChart.setOption({
                    title:{
                        text:cureName[0],
                        subtext:'费用比例图'
                    },
                    series: {
                        data: [
                            {value:centralCost[0],name:'本院支出'},
                            {value:branchCost[0],name:'分院支出'},
                            {value:centeralIncome[0],name:'门诊总利润'}
                        ]
                    }
                });
            }else{
                layer.msg("已经没有数据了");
            }
        });
    });

    $(function() {
        //左边柱状图点击事件
        barChart.on('click',function(params){
            if(params.value){
                for(var i=0;i<5;i++){
                    if(params.name==cureName[i]){
                        pieChart.setOption({
                            title:{
                                text:cureName[i],
                                subtext:'费用比例图'
                            },
                            series: {
                                data: [
                                    {value:centralCost[i],name:'本院支出'},
                                    {value:branchCost[i],name:'分院支出'},
                                    {value:centeralIncome[i],name:'门诊总利润'}
                                ]
                            }
                        });
                    }
                }
            }
        });
    });


    $(function() {
        //转换视图图标点击事件
        var iconNum=0; //转换视图图标点击次数
	    $('#topIcon').click(function(){
	        if(iconNum%2==0){
	            $('.table').hide();
	            $('.chart').show();
	            $('#topIcon').html("&#xe62d;");
	            barChart.clear();
                pieChart.clear();
                barChart.setOption(barOption);
                pieChart.setOption(pieOption);
                barChart.showLoading();
                pieChart.showLoading();
                testsize=5;
                if(testData.length < 5) {
                    testsize = testData.length;
                }
                cureName=[];
                cureCost=[];
                centralCost=[];
                branchCost=[];
                centeralIncome=[];
                for(var i=0;i<testsize;i++){
                    if(testData[i].cureName!="") {
                        cureName.push(testData[i].cureName);
                        cureCost.push(testData[i].cureCost);
                        centralCost.push(testData[i].centralCost);
                        branchCost.push(testData[i].branchCost);
                        centeralIncome.push(testData[i].centeralIncome);
                    }else{
                        break;
                    }
                }
                barChart.hideLoading();
	            barChart.setOption({
                    yAxis:{
                        data:cureName,
                    },
                    series:[
                        {name:'本院支出',data:centralCost},
                        {name:'治疗费用',data:cureCost},
                        {name:'分院支出',data:branchCost },
                        {name:'门诊总利润',data:centeralIncome}
                    ]
                });
	            pieChart.hideLoading();
                pieChart.setOption({
                    title:{
                        text:cureName[0],
                        subtext:'费用比例图'
                    },
                    series: {
                        data: [
                            {value:centralCost[0],name:'本院支出'},
                            {value:branchCost[0],name:'分院支出'},
                            {value:centeralIncome[0],name:'门诊总利润'}
                        ]
                    }
                });
	        }else{
	            $('.table').show();
	            $('.chart').css({'display':'none'});
	            $('#topIcon').html("&#xe62c;");
	        }
	        iconNum++;
        });
    });

    //转换视图图标监听事件
    $(function() {
        $('.icon').mouseenter(function(){
      		 $(this).addClass('iconColor');
    	 });
	    $('.icon').mouseleave(function(){
	       $(this).removeClass('iconColor');
	    });
        $('.icon2').mouseenter(function(){
            $(this).addClass('iconColor');
        });
        $('.icon2').mouseleave(function(){
            $(this).removeClass('iconColor');
        });
    });

    var barOption = {
        title:{
            text: clinicName,
            left:'5%'
        },
        grid: {top:'5%',left: '10%',right: '4%',bottom:'10%',containLabel: true },
        tooltip:{
            trigger:'axis',
            axisPointer:{
                type:'shadow'
            }
        },
        legend:{
            data:['治疗费用','本院支出','分院支出','门诊总利润'],
            top:'92%',
            left:'10%'
        },
        xAxis:{
            type:'value'
        },
        yAxis:{
            type:'category',
            data:[]
        },
        series:[
            {
                name:'本院支出',
                type:'bar',
                label:{
                    normal:{
                        show:true,
                        position:'right'
                    }
                },
                data:[]
            },
            {
                name:'治疗费用',
                type:'bar',
                label:{
                    normal:{
                        show:true,
                        position:'right'
                    }
                },
                data:[]
            },
            {
                name:'分院支出',
                type:'bar',
                label:{
                    normal:{
                        show:true,
                        position:'right'
                    }
                },
                data:[]
            },
            {
                name:'门诊总利润',
                type:'bar',
                label:{
                    normal:{
                        show:true,
                        position:'right'
                    }
                },
                data:[]
            }
        ]
    }

    var pieOption = {
        title:{text:'费用比例图',left:'45%'},
        legend: {
            top:'90%',
            left:'38%',
            data:[]
        },
        tooltip: {
            trigger:'item',
            axisPointer:{
                type:'shadow'
            }
        },
        series:[
            {
                name: '费用类型',
                type: 'pie',
                radius: '50%',
                itemStyle:{
                    normal:{
                        label:{
                            show:true,
                            position:'outside',
                            formatter: '{b} : {d}%',
                        },
                    }
                },
                selectedOffset:'10',
                roseType:'angle',
                center: ['50%', '45%'],
                data:[]
            }
        ]
    };
</script>
</html>